<template>
  <div class="chat-cell" :style="sendReceive === 1 ? mebody : userbody">
    <div class="user-info" v-if="sendReceive !== 1 && isGroup">
      <el-avatar class="friendavatar" :size="40" :src="senderInfo.avatar">
        <img src="../../../../assets/picture/defaultAvatar.png" />
      </el-avatar>
    </div>
    <v-contextmenu ref="contextmenu" :disabled="info.isTemp">
      <v-contextmenu-item
        v-if="sendReceive === 1 && recallMin && fileHelperShow"
        @click="recall()"
        >撤回</v-contextmenu-item
      >
      <v-contextmenu-item v-if="isWalletRelMsg" @click="transpondfn">转发</v-contextmenu-item>
      <v-contextmenu-item v-if="showDownLoad" @click="downloadfn"
        >下载</v-contextmenu-item
      >
      <v-contextmenu-item @click="deleteMsg">删除</v-contextmenu-item>
    </v-contextmenu>
    <div class="text-card" :style="sendReceive === 1 ? cardRight : cardLeft">
      <div v-if="isGroup" class="name">
        {{ senderName }}
      </div>
      <div class="msg-box">
        <MessageState v-if="info.megState" :info="info" />
        <div
          @click.right="meRight"
          v-contextmenu:contextmenu
          :style="sendReceive === 1 ? me : user"
        >
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import _ from 'lodash'
import Jindouyun from '../../../../utils/jindouyun'
import { downloadImage, downloadFile } from '../../../../utils/auxiliaryDownload'
import { getStorage } from '../../../../js/utils'
import { sendRecallGroup, sendRecallSingle } from '../../../../api/ChatSocket'
import MessageState from './MessageState'
const _jindouyun = new Jindouyun({
  userId: '1111435842045702146',
  header: {},
  token: ''
})
export default {
  props: ['info', 'id'],
  components: { MessageState },
  computed: {
    ...mapState('app', ['chatRoomInfo', 'friendList', 'clickRightId', 'chatList', 'groupList', 'roomId']),
    isGroup: function () {
      const i = _.findIndex(this.groupList, e => e.roomId + '' === this.roomId)
      return i !== -1
    },
    myName: function () {
      return getStorage('aillo_name')
    },
    senderName: function () {
      let str = this.myName
      if (this.sendReceive === 0) {
        const { showName, name } = this.senderInfo
        str = showName || name
      }
      return str
    },
    showDownLoad: function () {
      const { subType } = this.info
      const arr = ['image', 'file', 'video']
      return arr.includes(subType)
    },
    fileUrl: function () {
      return _jindouyun.getDownloadUrl({ isPublic: false, fileId: this.info.sourceId + '' })
    },
    sendReceive: function () {
      return this.info.isMe ? 1 : 0
    },
    //红包、转账消息？
    isWalletRelMsg: function(){
      const { subType } = this.info
      const arr = ['bonus', 'transfer']
      return !(arr.includes(subType));
    },
    // 文件助手撤回隐藏
    fileHelperShow: function () {
      return this.info.msgType !== 'fileHelper'
    },
    friendInfo: function () {
      const i = _.findIndex(this.friendList, e => e.roomId + '' === this.roomId)
      if (i !== -1) {
        return this.friendList[i]
      } else return null
    },
    senderInfo: function () {
      if (_.isUndefined(this.info.senderId) && _.isUndefined(this.info.sender)) {
        return {}
      } else {
        const index = _.findIndex(this.chatRoomInfo[this.roomId].data, e => e.userId + '' === this.info.senderId || e.userId + '' === this.info.sender)
        if (index !== -1) {
          return this.chatRoomInfo[this.roomId].data[index]
        } else {
          return {}
        }
      }
    }
  },
  data () {
    return {
      cardRight: {
        textAlign: 'end'
      },
      cardLeft: {
        textAlign: 'start'
      },
      mebody: {
        justifyContent: 'flex-end'
      },
      userbody: {
        justifyContent: 'start'
      },
      me: {
        margin: '0 10px 10px 0',
        maxWidth: '250px',
        color: '#000',
        fontWeight: '400',
        display: 'inline-block',
        wordBreak: 'break-word',
        fontSize: '14px',
        borderRadius: '20px'
      },
      user: {
        margin: '0 10px 10px 0',
        maxWidth: '250px',
        color: '#000',
        fontWeight: '400',
        display: 'inline-block',
        wordBreak: 'break-word',
        fontSize: '14px',
        borderRadius: '20px'
      },
      recallMin: true
    }
  },
  methods: {
    recall () {
      if (this.isGroup) {
        sendRecallGroup(this.info.timestamp, this.roomId, this.info.requestId, this.info.messageId)
      } else {
        const i = _.findIndex(this.friendList, e => e.roomId + '' === this.roomId)
        const friend = this.friendList[i]
        sendRecallSingle(this.info.timestamp, this.roomId,
          this.info.requestId, this.info.messageId, friend.id)
      }
      const msg = { ...this.info, subType: 'withdraw' }
      this.$store.dispatch('app/updateChatListMsg', msg)
    },
    downloadfn () {
      const { subType, fileName } = this.info
      switch (subType) {
        case 'image':
          downloadImage(this.fileUrl, fileName)
          break
        case 'file':
          downloadFile(this.fileUrl, fileName)
          break
        case 'video':
          downloadFile(this.fileUrl, fileName)
          break
      }
    },
    deleteMsg () { // 删除信息
      this.$store.dispatch('app/removeChatListMsg', this.info)
      this.$notify({
        title: '成功',
        message: '消息删除成功',
        type: 'success'
      })
    },
    transpondfn () { // 转发的方法
      this.$store.dispatch('transpond/setSelectInfo', JSON.parse(JSON.stringify(this.info)))
      this.$store.dispatch('transpond/setvisible', true)
    },
    meRight () { // 右键的方法
      event.cancelBubble = true
      event.returnValue = false
      this.$store.dispatch('app/setClickRightId', this.id)
      let diff = new Date().getTime() - this.info.timestamp * 1
      let nd = 1000 * 24 * 60 * 60
      let nh = 1000 * 60 * 60
      let nm = 1000 * 60
      let min = parseInt(diff % nd % nh / nm)
      if (min < 2) {
        this.recallMin = true
      } else {
        this.recallMin = false
      }
    }
  },
  watch: {
    clickRightId: {
      handler (data, olddata) {
        if (data !== this.id) {
          this.$refs.contextmenu.hide()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.chat-cell {
  display: flex;
  align-items: flex-start;
  .user-info {
    margin-right: 10px;
    .friendavatar {
      margin-right: 10px;
    }
  }
  .text-card {
    .name {
      font-size: 12px;
      color: #ddd;
      margin-bottom: 5px;
    }
    .msg-box {
      display: flex;
      align-items: center;
    }
  }
}
</style>
